<template>
     <el-form :model="form" label-width="100px" :inline="true" style="padding: 10px;">
       <el-form-item label="编码">
         <el-input v-model="form.code" :disabled="action!='add'"/>
       </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name"/>
        </el-form-item>

       <el-form-item label="单位">
         <el-input v-model="form.unit"/>
       </el-form-item>
       <el-form-item label="类别">
         <el-input v-model="form.category"/>
       </el-form-item>
        <el-form-item label="数据类型">
          <el-select v-model="form.fieldType" placeholder="请选择活动区域" size>
            <el-option v-for="item in dict.fluxData" :label="item.label" :value="item.value" :key="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="默认值">
          <el-input v-model="form.defaultValue"/>
        </el-form-item>
       <el-form-item label="存储策略">
         <el-select v-model="form.storePolicy" placeholder="存储策略">
           <el-option  v-for="item in dict.storePolicy" :label="item.label" :value="item.value" :key="item.value"/>
         </el-select>
       </el-form-item>
       <el-form-item label="存储间隔" v-if="form.storePolicy==='PERIOD' || form.storePolicy==='PER_CH'">
         <el-input v-model="form.storeInterval"/>
       </el-form-item>
       <el-form-item label="变化类型" v-if="form.storePolicy==='CHANGE' || form.storePolicy==='PER_CH'">
         <el-select v-model="form.changeType" placeholder="变化类型">
          <el-option v-for="item in dict.change" :label="item.label" :value="item.value" :key="item.value"/>
         </el-select>
       </el-form-item>
       <el-form-item label="变化值" v-if="form.storePolicy==='CHANGE' || form.storePolicy==='PER_CH'">
         <el-input v-model="form.changeValue"/>
       </el-form-item>
          <div style="text-align:center;margin: 10px auto;">
          <el-button type="primary" @click="handleTest">测试</el-button>
          <el-button type="primary" @click="handleAdd">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>
</template>
<script>
    import{reactive, ref} from 'vue'
    import {add,edit,test} from '/http/signal.js'
    import {useDict} from '/http/options.js'
    const {ElMessage,ElMessageBox} = ElementPlus;
    export default {
        props:{
          initParams:Object
        },
        setup(props,context){
            const form=reactive({
              code:'',
              name:'',
              fieldType:'DOUBLE',
              defaultValue:'0',
              category:'',
              unit:'',
              storePolicy:'ALWAYS',
              storeInterval:0,
              changeType:'ANY',
              changeValue:0
            })
          const dict = ref({});
          useDict(dict,'fluxData,storePolicy,alarmPolicy,change');
          const handleAdd = ()=>{
              if(action.value=='add'){
                add(form).then(res=> {
                  response(res,context)
                });
              }else{
                edit(form).then(res=> {
                  response(res,context)
                });
              }
          }

          const handleTest = ()=>{
              test(form).then(res=> {
                response(res)
              });
          }

          const handleCancel = ()=>{
              context.emit('close',false)
          }
          const action = ref('edit');


          onMounted(()=>{
            if(props.initParams){
              Object.assign(form,props.initParams)
              action.value= 'edit'
            }else{
              action.value= 'add'
            }
          })

          return{
            form,handleAdd,handleCancel,action,handleTest,
            dict
          }
        }
    }
</script>

<style scoped>
.el-form .el-select {
  width: 192px; /* 或者根据需要设置其他宽度 */
}
</style>